import React from 'react';
import { Form } from 'antd';
import Area from './Area';
import DeviceSelect from '../controls/DeviceSelect';

/**
 * 选择验收设备
 */
function DeviceArea(props) {
    const { edit, initialValues } = props;

    return (
        <Area title="添加验收设备" required>
            <Form.Item name="deviceList" rules={[{ required: true, message: '必选' }]}>
                <DeviceSelect
                    onDialogOpen={(value, openDialogAndSetValue) => {
                        if (edit) {
                            const unusableIds = initialValues?.deviceList?.map?.(({ cm_unid }) => cm_unid) ?? [];
                            const nextValue = value.filter(({ resourceId }) => !unusableIds.includes(resourceId));

                            openDialogAndSetValue(nextValue);
                        }

                        openDialogAndSetValue(value);
                    }}
                />
            </Form.Item>
        </Area>
    );
}

export default DeviceArea;
